<template>
	<view>
		<view v-if="inPorcessOrderId != null" class="order-process" @click="toOrder">您有进行中的订单,点击查看</view>
		
		<map id="map" :longitude="from.longitude" :latitude="from.latitude" :style="contentStyle" scale="15" :enable-traffic="false" :show-location="true" :enable-poi="true" class="map">
			<cover-image class="location" src="../../static/workbench/location.png" @tap="toLocationHandle()"></cover-image>
		</map>
		<view class="panel">
			<view class="from" @tap="chooseLocationHandle('from')">
				<text>{{ from.address }}</text>
			</view>
			<view class="dashed-line"></view>
			<view class="to" @tap="chooseLocationHandle('to')">
				<text>{{ to.address }}</text>
			</view>
			<button class="btn" @tap="toCreateOrderHandle">查看路线</button>
		</view>
	</view>
</template>

<script>
	
import GtPush from '../../lib/gtpush-min.js'
	//地图点选插件
const chooseLocation = requirePlugin('chooseLocation');
let plugin = requirePlugin('routePlan');
let QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
let qqmapsdk ;

export default {
	data() {
		return {
			//开始位置
			from: {
				address: '输入你的开始位置',
				longitude: 0,
				latitude: 0
			},
			//结束位置
			to: {
				address: '输入你的目的地', 
				longitude: 0,
				latitude: 0
			},
			
			//窗口样式
			contentStyle: '',
			windowHeight: 0,
			//地图对象
			map: null,
			//标记:开始位置点选或者结束位置点选
			chooseFromOrToflag: null,
			inPorcessOrderId:null,
			chooseType:"",
      type:""
		};
	},
	methods: {
    init() {
      this.initStyle()
      this.getCurrentMap()
      this.getKey()
    },
    //查看路线规划
    toCreateOrderHandle(){
      let _this = this;
      if(_this.from.longitude == 0 || _this.to.longitude == 0){
        uni.showToast({
          title:"请完善位置信息",icon:"error"
        })
        return;
      }

      //作用将 起始位置 和 目的地的位置 保存本地 在下一个界面使用
      uni.setStorageSync("from",_this.from)
      uni.setStorageSync("to",_this.to)
      uni.navigateTo({
        url: '../create_order/create_order'
      });
    },
    //点选地址
    chooseLocationHandle(type){
      const key =this.Consts.QQMAP_KEY; //使用在腾讯位置服务申请的key
      const referer = 'fccar_key'; //调用插件的app的名称

      const category = '生活服务,娱乐休闲';
      this.type=type
      wx.navigateTo({
        url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&category=' + category,
      })
    },
    //回显用户选择的地址
    chooseLocationCallback(){
      let _this = this;
      const location = chooseLocation.getLocation();
      if(!location || !location.address)return;
      if(_this.type == 'from'){
        _this.from.address = location.name;
        _this.from.longitude = location.longitude;
        _this.from.latitude = location.latitude;
      }else if(_this.type == 'to'){
        _this.to.address = location.name;
        _this.to.longitude = location.longitude;
        _this.to.latitude = location.latitude;
      }
    },
    //加载地图密钥
    getKey(){
      var _this=this
      qqmapsdk = new QQMapWX({
        key: _this.Consts.QQMAP_KEY // 必填
      });
    },
    //初始化窗口样式
    initStyle(){
      let _this = this;
      //处理窗口样式
      let windowHeight = uni.getSystemInfoSync().windowHeight;
      _this.windowHeight = windowHeight;
      _this.contentStyle = `height:${_this.windowHeight}px;`;
    },
    //初始化地图
    getCurrentMap() {
      let _this = this;
      uni.getLocation({
        type: 'gcj02',
        success: function (res) {
          _this.from.latitude = res.latitude
          _this.from.longitude = res.longitude
          _this.getMap(res.longitude,res.latitude)
        }
      });
	  },
    //移动到当前的位置
    toLocationHandle(){
      let _this = this;
      let map = wx.createMapContext('map');
      map.moveToLocation({
        longitude: _this.from.longitude,
        latitude: _this.from.latitude,
      })
    },
    //解析地图
    getMap(longitude,latitude){
      let _this=this
      qqmapsdk.reverseGeocoder({
        location: {
          latitude: latitude,
          longitude: longitude
        },
        success: function(res) {
          if (res.status==0 && res.result.address_component.city!=null && res.result != null){
            _this.from.address=res.result.formatted_addresses.recommend
          }
        },
        fail: function(error) {
          console.error("数据正在加载");
        },
      })
    },
	onShow: function() {
    this.chooseLocationCallback();
	},
	onHide: function() {
	},
	onLoad: function() {
		let _this = this;
    _this.init()
	},
	onUnload: function() {
		
	}
}
}
</script>

<style lang="less">
@import url('workbench.less');
</style>
